<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>


    <script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

    <style type="text/css">
        body {
            background-color: #0bbc;
            text-align: center;
        }

        #resumeId {
            position: absolute;
            top: 50%;
            left: 20%;
            margin-top: -250px;
            margin-left: -250px;
            background: #fff;
            border-radius: 4px;
            box-shadow: 0 0 10px #12a591;
            padding: 57px 50px 35px;
            box-sizing: border-box
        }

        tbody tr td {
            min-width: 100px;
        }

        /**/
        .mask {
            margin: 0;
            padding: 0;
            border: none;
            width: 100%;
            height: 100%;
            background: #333;
            opacity: 0.6;
            filter: alpha(opacity=60);
            z-index: 9999;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
        }

        #AddBox {
            position: absolute;
            left: 460px;
            top: 150px;
            background: white;
            width: 426px;
            height: 500px;
            border: 3px solid #444;
            border-radius: 7px;
            z-index: 10000;
            display: none;
        }

        .row1 {
            background: #f7f7f7;
            padding: 0px 20px;
            line-height: 50px;
            height: 50px;
            font-weight: bold;
            color: #666;
            font-size: 20px;
        }

        .row {
            height: 77px;
            line-height: 77px;
            padding: 0px 30px;
            font-family: 华文楷体;
            font-size: x-large;
        }

        .close_btn {
            font-family: arial;
            font-size: 30px;
            font-weight: 700;
            color: #999;
            text-decoration: none;
            float: right;
            padding-right: 4px;
        }

        .inputBox {
            border: 1px solid #c3c3c3;
            padding: 1px 3px 6px 3px;
            border-radius: 5px;
            margin-left: 5px;
        }

        #txtName {
            height: 27px;
            width: 230px;
            border: none;
        }

        #txtAddress {
            height: 27px;
            width: 230px;
            border: none;
        }

        #txtPhone {
            height: 27px;
            width: 230px;
            border: none;
        }

        .btnClass {
            color: White;
            background: #4490f7;
            text-decoration: none;
            padding: 10px 30px;
            margin-left: 10px;
            margin-top: 40px;
            border-radius: 5px;
            opacity: 0.8;
            filter: alpha(opacity=80);
        }

        .example {
            /*position: fixed;*/
            /*left: 390px;*/
            /*top: 30px;*/
            color: White;
            background: #4490f7;
            text-decoration: none;
            padding: 4px 45px;
            margin-left: 87px;
            margin-top: 40px;
            border-radius: 5px;
            opacity: 0.6;
            filter: alpha(opacity=60);
        }

        .warning {
            float: right;
            color: Red;
            text-decoration: none;
            font-size: 20px;
            font-weight: bold;
            margin-right: 20px;
            display: none;
        }
    </style>

    <script>
        $(function () {

            //查询数据
            queryData();

            //删除
            $(".deleteBtn").bind("click", function () {
                var userId = $(this).parents("tr").find(".userId").text();
                $.ajax({
                    cache: false,
                    async: false,
                    type: 'delete',
                    url: "/v1/resume/delete/" + userId,
                    contentType: 'application/json;charset=utf-8',//请求数据类型
                    dataType: 'json',//返回数据类型
                    success: function (data) {
                        console.log(data);
                        if ("0000" === (data.code) && true === data.success) {
                            //刷新
                            window.location.reload();
                        } else if ("9999" === (data.code)) {//说明未登录
                            if (true !== data.success) {
                                window.location.href = "login.jsp";
                            }
                        } else {
                            alert(data.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            });


            //新增
            $("#addBtn").on('click', function () {
                $("body").append("<div id='mask'></div>");
                $("#mask").addClass("mask").fadeIn("slow");
                $("#AddBox").fadeIn("slow");
                $("#confirmEditBtn").hide();
                $("#txtId").hide();
                $("#winContentId").text("新增");
            });

            //确认新增
            $("#confirmAddBtn").on('click', function () {
                var txtName = $("#txtName").val();
                var txtAddress = $("#txtAddress").val();
                var txtPhone = $("#txtPhone").val();

                var falg = checkParam(txtName, txtAddress, txtPhone);

                if (!falg) {
                    alert("有参数未填写~~~");
                } else {
                    //请求后台
                    addData(txtName, txtAddress, txtPhone);
                }
            });

            //编辑
            $(".editBtn").bind("click", function () {
                var userId = $(this).parents("tr").find(".userId").text();
                $.ajax({
                    cache: false,
                    async: false,
                    type: 'get',
                    url: "/v1/resume/get/" + userId,
                    contentType: 'application/json;charset=utf-8',//请求数据类型
                    dataType: 'json',//返回数据类型
                    success: function (data) {
                        console.log(data);
                        if ("0000" === (data.code) && true === data.success) {
                            // 显示弹出层
                            $("body").append("<div id='mask'></div>");
                            $("#mask").addClass("mask").fadeIn("slow");
                            $("#AddBox").fadeIn("slow");
                            $("#confirmAddBtn").hide();
                            $("#txtId").hide();
                            $("#winContentId").text("修改");

                            //填充数据
                            $("#txtId").val(data.data[0].id);
                            $("#txtName").val(data.data[0].name);
                            $("#txtAddress").val(data.data[0].address);
                            $("#txtPhone").val(data.data[0].phone);

                        } else if ("9999" === (data.code)) {//说明未登录
                            if (true !== data.success) {
                                window.location.href = "login.jsp";
                            }
                        } else {
                            alert(data.msg);
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log(errorThrown);
                    }
                });
            });

            //确认编辑
            $("#confirmEditBtn").bind('click', function () {
                var txtId = $("#txtId").val();
                var txtName = $("#txtName").val();
                var txtAddress = $("#txtAddress").val();
                var txtPhone = $("#txtPhone").val();

                var falg = checkParam(txtName, txtAddress, txtPhone);

                if (txtId === "" || txtId === undefined || txtId === null) {
                    alert("数据的Id为空~~~")
                } else if (!falg) {
                    alert("有参数未填写~~~");
                } else {
                    //请求后台
                    editData(txtId, txtName, txtAddress, txtPhone);
                }
            });


            //弹出
            $(".example").hover(function () {
                $(this).stop().animate({
                    opacity: '1'
                }, 600);
            }, function () {
                $(this).stop().animate({
                    opacity: '0.6'
                }, 1000);
            });

            //按钮的透明度
            $(".btnClass").hover(
                function () {
                    $(this).stop().animate({
                        opacity: '1'
                    }, 600);
                },
                function () {
                    $(this).stop().animate({
                        opacity: '0.8'
                    }, 1000);
                }
            );

            //============================================================
            //文本框不允许为空---单个文本触发
            $("#txtName").on('blur', function () {
                var txtName = $("#txtName").val();
                if (txtName === "" || txtName === undefined || txtName === null) {
                    $("#warn").css({display: 'block'});
                } else {
                    $("#warn").css({display: 'none'});
                }
            });
            $("#txtName").on('focus', function () {
                $("#warn").css({display: 'none'});
            });

            $("#txtAddress").on('blur', function () {
                var txtAddress = $("#txtAddress").val();
                if (txtAddress === "" || txtAddress === undefined || txtAddress === null) {
                    $("#warn2").css({display: 'block'});
                } else {
                    $("#warn2").css({display: 'none'});
                }
            });
            $("#txtAddress").on('focus', function () {
                $("#warn2").css({display: 'none'});
            });

            $("#txtPhone").on('blur', function () {
                var txtPhone = $("#txtPhone").val();
                if (txtPhone === "" || txtPhone === undefined || txtPhone === null) {
                    $("#warn3").css({display: 'block'});
                } else {
                    $("#warn3").css({display: 'none'});
                }
            });
            $("#txtPhone").on('focus', function () {
                $("#warn3").css({display: 'none'});
            });

            //============================================================
            //关闭
            $(".close_btn").hover(function () {
                $(this).css({color: 'black'})
            }, function () {
                $(this).css({color: '#999'})
            }).on('click', function () {
                $("#AddBox").fadeOut("fast");
                $("#mask").css({display: 'none'});
                clear();
                $("#confirmEditBtn").show();
                $("#confirmAddBtn").show();
            });
            //取消按钮
            $("#cancelBtn").on('click', function () {
                $("#AddBox").fadeOut("fast");
                $("#mask").css({display: 'none'});
                clear();
                $("#confirmEditBtn").show();
                $("#confirmAddBtn").show();
            });

        });

        /**
         * 查询数据
         */
        function queryData() {
            $.ajax({
                cache: false,
                async: false,
                type: 'get',
                url: "/v1/resume/queryAll",
                contentType: 'application/json;charset=utf-8',//请求数据类型
                dataType: 'json',//返回数据类型
                success: function (data) {
                    console.log(data);
                    if ("0000" === (data.code) && true === data.success) {
                        var $dataId = $("#dataId");
                        var dataList = data.data;
                        for (var i = 0; i < dataList.length; i++) {
                            $dataId.append(" <tr style=\"text-align: center;min-width: 500px\">" +
                                "            <td class='userId'>" + dataList[i].id + "</td>" +
                                "            <td>" + dataList[i].name + "</td>" +
                                "            <td>" + dataList[i].address + "</td>" +
                                "            <td>" + dataList[i].phone + "</td>" +
                                "            <td>" +
                                "                <button class='editBtn'>编 辑</button>" +
                                "                <button class='deleteBtn'>删 除</button>" +
                                "            </td>" +
                                "        </tr>")
                        }
                    } else if ("9999" === (data.code)) {//说明未登录
                        if (true !== data.success) {
                            window.location.href = "login.jsp";
                        }
                    } else {
                        alert(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });
        }

        /**
         * 添加数据
         * @param txtName
         * @param txtAddress
         * @param txtPhone
         */
        function addData(txtName, txtAddress, txtPhone) {
            $.ajax({
                cache: false,
                async: false,
                type: 'post',
                url: "/v1/resume/add",
                contentType: 'application/json;charset=utf-8',//请求数据类型
                data: JSON.stringify({
                    "name": txtName,
                    "address": txtAddress,
                    "phone": txtPhone
                }),
                dataType: 'json',//返回数据类型
                success: function (data) {
                    console.log(data);
                    if ("0000" === (data.code) && true === data.success) {//增加成功
                        window.location.reload();//属性本页面
                        clear();
                    } else if ("9999" === (data.code)) {//说明未登录
                        if (true !== data.success) {
                            window.location.href = "login.jsp";
                        }
                    } else {
                        alert(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });
        }

        /**
         * 编辑数据
         */
        function editData(txtId, txtName, txtAddress, txtPhone) {
            $.ajax({
                cache: false,
                async: false,
                type: 'put',
                url: "/v1/resume/edit",
                contentType: 'application/json;charset=utf-8',//请求数据类型
                data: JSON.stringify({
                    "id": txtId,
                    "name": txtName,
                    "address": txtAddress,
                    "phone": txtPhone
                }),
                dataType: 'json',//返回数据类型
                success: function (data) {
                    console.log(data);
                    if ("0000" === (data.code) && true === data.success) {//修改成功
                        window.location.reload();
                        clear();
                    } else if ("9999" === (data.code)) {
                        if (true !== data.success) {
                            window.location.href = "login.jsp";
                        }
                    } else {
                        alert(data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    console.log(errorThrown);
                }
            });
        }

        /**
         * 检查参数
         */
        function checkParam(txtName, txtAddress, txtPhone) {
            var falg = true;
            if ((txtName === "" || txtName === undefined || txtName === null)
                && (txtAddress === "" || txtAddress === undefined || txtAddress === null)
                && (txtPhone === "" || txtPhone === undefined || txtPhone === null)) {
                $(".warning").css({display: 'block'});
                falg = false;
            } else {
                /*$("#warn2").css({display: 'none'});*/
                if (txtName === "" || txtName === undefined || txtName === null) {
                    $("#warn").css({display: 'block'});
                    falg = false;
                }
                if (txtAddress === "" || txtAddress === undefined || txtAddress === null) {
                    $("#warn2").css({display: 'block'});
                    falg = false;
                }
                if (txtPhone === "" || txtPhone === undefined || txtPhone === null) {
                    $("#warn3").css({display: 'block'});
                    falg = false;
                }
            }
            return falg;
        }

        function clear() {
            $("#txtId").val("");
            $("#txtName").val("");
            $("#txtAddress").val("");
            $("#txtPhone").val("");
        }

    </script>
</head>
<body style="text-align: center">


<div>
    <table border="1" id="resumeId">
        <caption style="font-size: 20px;font-family: 宋体,serif;font-weight: bolder;background-color: aliceblue">
            用户基本简历信息
        </caption>
        <thead>
        <tr style="text-align: right;min-width: 500px">
            <th colspan="5" style="height: 10px">
                <span id="addBtn" class="example btn">新 增</span>
            </th>
        </tr>
        <tr style="text-align: center;min-width: 500px">
            <th>id</th>
            <th>用户名</th>
            <th>地 址</th>
            <th>手机号</th>
            <th>操 作</th>
        </tr>
        </thead>
        <tbody id="dataId">

        </tbody>
    </table>

    <div id="AddBox">
        <div class="row1">
            <span id="winContentId"></span>窗口<a href="javascript:void(0)" title="关闭窗口" class="close_btn"
                                                id="closeBtn">×</a>
        </div>

        <input type="text" id="txtId" readonly/>
        <div class="row">
            用户名:
            <span class="inputBox">
                <input type="text" id="txtName" placeholder="用户名"/>
            </span>
            <a href="javascript:void(0)" title="必填" class="warning" id="warn">*</a>
        </div>
        <div class="row">
            地&nbsp;&nbsp;&nbsp;&nbsp;址:
            <span class="inputBox">
                <input type="text" id="txtAddress" placeholder="地址"/>
            </span>
            <a href="javascript:void(0)" title="必填" class="warning" id="warn2">*</a>
        </div>
        <div class="row">
            手机号:
            <span class="inputBox">
                <input type="text" id="txtPhone" placeholder="手机号"/>
            </span>
            <a href="javascript:void(0)" title="必填" class="warning" id="warn3">*</a>
        </div>
        <div class="row">
            <a href="#" class="btnClass" id="cancelBtn">取&nbsp;&nbsp;消</a>
            <%-- 新增确认 --%>
            <a href="#" class="btnClass" id="confirmAddBtn">确&nbsp;&nbsp;认</a>
            <%-- 编辑确认 --%>
            <a href="#" class="btnClass" id="confirmEditBtn">确&nbsp;&nbsp;认</a>
        </div>
    </div>
</div>
</body>
</html>
